<!-- 订单列表 -->
<template>
	<view class="page">
		<uni-list class="body" v-if="localData && localData.length > 0">
			<uni-list-item  thumb-size="base" v-for="(item, i) in localData" :key="i" @click="gotoPage(item, tabIndex)"
				:link="item.orderType != '手动付款'">
				<template #body>
					<view class="slot-box">
						<view class="row">
							<text>下单时间：{{item.orderTime}}</text>
						</view>
						<view class="row">
							<text>商品数量：{{item.totalNumber}}件， {{item.orderType}}</text>
							<view>
								<uni-tag :inverted="true" :circle="true" v-if="item.status == '已完成' || item.status == '已取消'" :text="item.status" type="default" />
								<uni-tag :inverted="true" :circle="true" v-else-if="item.status == '支付异常'" :text="item.status" type="warning" />
								<uni-tag :inverted="true" :circle="true" v-else :text="item.status" type="success" />
							</view>
						</view>
						<view class="row">
							<text class="orange f40 bloder">¥{{item.totalAmount}}</text>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>
<script>
	import {
		SelectPageOrder
	} from '@/pages/common/api.js'
	import {shopCode, baseUrl} from '@/pages/common/js/http.js'
	import {
		formatDate
	} from '@/pages/common/js/util.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				searchForm: {
					current: 1,
					size: 10
				},
				localData: []
			}
		},
		onLoad(options) {
			this.search();
			uni.$off('refresh-task-list')
			uni.$on('refresh-task-list', () => {
				this.tabIndex = 1
				this.search()
			})
		},
		onReachBottom() {
			console.log('上拉触底。。。。。。')
			if (this.status === 'noMore') {
				return
			}
			this.status = 'loading';
			this.$nextTick(() => {
				setTimeout(() => {
					this.getList();
				}, 1000)
			})
		},
		onPullDownRefresh() {
			console.log('下拉更新')
			this.reload = true
			this.searchForm.current = 1
			this.search();
		},
		watch: {
			tabIndex() {
				this.searchForm.current = 1
				this.localData = []
				this.$nextTick(() => {
					this.getList()
				})
			}
		},
		methods: {
			getIndex(e) {
				console.log(e)
				this.tabIndex = e
			},
			search() {
				this.searchForm.current = 1
				this.reload = true
				this.getList()
			},
			gotoPage(row, type) {
				console.log('gotoPage=', row)
				// 打开详情
				uni.navigateTo({
					url: `/pages/order/detail?data=${encodeURIComponent(JSON.stringify(row))}`
				})
			},
			getList() {
				let params = Object.assign({}, this.searchForm)
				params.shopCode = shopCode
				let openid = uni.getStorageSync('config-openid')
				params.customerId = openid
				SelectPageOrder(params).then(async res => {
					console.log('日志', res)
					uni.stopPullDownRefresh()
					if (res.code === 20000) {
						let list = res.data.records
						this.localData = this.reload ? list : this.localData.concat(list);
						this.reload = false;
						this.searchForm.current++
						if (res.data.current < res.data.pages) {
							this.status = 'more';
						} else {
							this.status = 'noMore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		min-height: 100vh;
		font-size: 12px;

		.body {
			width: 100vw;
			// background-color: #fff;
			box-sizing: border-box;
			// padding: 5px 0px;

			.list {}

			.slot-box {
				flex: 1;
				font-size: 14px;
				margin-right: 10px;
			}

			.loadmore {
				text-align: center;
				line-height: 30px;
				height: 30px;
				margin-bottom: 5px;
				font-size: 12px;
			}
		}

		.mt10 {
			margin-top: 10px;
		}

		.row {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>